//创建外壳组件App
import React,{ Component }  from 'react'
import Header from './component/Header'
import List from './component/List'
import Footer from './component/Footer'
import './App.css';
// 暴露并创建App组件
export default class App extends Component{

  // 状态在哪，操作状态的方法就在哪

  // 初始化状态
  state = {
    todos:[
      {id:'001',name:'吃饭',done:true},
      {id:'002',name:'睡觉',done:true},
      {id:'003',name:'逛街',done:true},
      {id:'004',name:'敲代码',done:false},
    ]
  }

// addTodo用于添加一个todo,接收的参数是todo的对象
  addTodo = (todoObj)=>{
    // console.log();

    // 获取原todos
    const {todos} = this.state
    const newTodos = [todoObj,...todos]
    this.setState({todos:newTodos})
  }

  // 用于更新一个todo对象
  updatetodo = (id,done) =>{
    // 获取状态中的todos
    const {todos} = this.state
    // 匹配处理数据
    const newTodos = todos.map((todoObj)=>{
      if(todoObj.id === id) return {...todoObj,done}
      else return todoObj
    })
    this.setState({todos:newTodos})
  }


  // deleteTodo用于删除一个todo对象
  deleteTodo = (id) =>{
    //获取原来的todos
    const {todos} = this.state
    // 删除指定id的todo对象
    const newTodos = todos.filter((todoObj)=>{
      return todoObj.id !== id
    })
    // 更新状态
    this.setState({todos:newTodos})
  }

  // checkAllTodo用于全选
  checkAllTodo = (done) =>{
    // 获取原来的的todos
    const {todos} = this.state
    // 加工数据
    const newTodos = todos.map(todoObj =>{
      return {...todoObj,done}
    })
    this.setState({ todos:newTodos})
  }

  // clearAllDone用于清除所有任务
  clearAllDone = () =>{
    // 获取原来数据
    const {todos} = this.state
    // 过滤数据
   const newTodos = todos.filter((todoObj)=>{
      return !todoObj.done
    })
    //更新状态
    this.setState({todos:newTodos})
  }
  render(){
    const { todos } = this.state
    return (
      <div id="root">
          <div className="todo-container">
              <div className="todo-wrap">
                  <Header addTodo={this.addTodo}/>
                  <List todos={ todos } updatetodo={this.updatetodo } deleteTodo={this.deleteTodo}/>
                  <Footer todos={ todos } checkAllTodo={this.checkAllTodo} clearAllDone={this.clearAllDone}/>
              </div>
            </div>
      </div>
    );
  }
 
}
//暴露App组件
// export default App;
